<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>价值投资推荐</title>
    <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/module/admin.css?v=318"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #xTable2 + .layui-table-view .layui-table-click, #xTable2 + .layui-table-view .layui-table-hover, #xTable2 + .layui-table-view .layui-table tbody tr:hover {
            background: transparent;
        }
    </style>
</head>
<body>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">

            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form toolbar">
                        <div class="layui-form-item text-right">
                            <div class="layui-inline pull-left">
                                <button class="layui-btn icon-btn" id="addDataSourceBtn"><i
                                        class="layui-icon">&#xe654;</i>添加
                                </button>
                                <button id="file-btn-upload" class="layui-btn layui-btn layui-btn-normal icon-btn">
                                    <i class="layui-icon">&#xe681;</i>导入
                                </button>
                                <button class="layui-btn layui-btn-danger icon-btn"><i
                                        class="layui-icon">&#xe640;</i>删除
                                </button>
                            </div>

                            <div id="file-list-group" class="layui-hide"><input type="file" id="importStockExcel"></div>
                            <div class="layui-inline">
                                <input tb-search="xTable1" class="layui-input icon-search" type="text"/>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-btn-group">
                                    <button tb-export="xTable1" class="layui-btn layui-btn-primary icon-btn">
                                        <i class="layui-icon">&#xe67d;</i>
                                    </button>
                                    <button tb-refresh="xTable1" class="layui-btn layui-btn-primary icon-btn">
                                        <i class="layui-icon">&#xe9aa;</i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <table id="xTable1" lay-filter="xTable1"></table>
                </div>

            </div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body text-danger">
            表格扩展tableX模块还封装了导出xlsx格式的excel数据、绑定行鼠标右键、post方式下载文件(支持传参数，可用于请求后端导出excel下载)等实用功能。
        </div>
    </div>
</div>

<!-- 表格状态列 -->
<script type="text/html" id="tableState">
    <input type="checkbox" lay-filter="ckState" value="{{d.userId}}" lay-skin="switch"
           lay-text="正常|锁定" {{d.state==0?'checked':''}}/>
    <!-- export-show用于前端搜索和导出数据使用 -->
    <div class="export-show">{{d.state==0?'正常':'锁定'}}</div>
</script>


<!-- 固定底部按钮 -->
<script type="text/html" id="dialogEditDialog1">
    <form id="dialogEditForm1" lay-filter="dialogEditForm1" class="layui-form model-form no-padding ">
        <input name="ptId" type="hidden"/>
        <div class="model-form-body" style="height: 350px;" onscroll="layui.admin.hideFixedEl();">

            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">数据源类型:</label>
                <div class="layui-input-block ew-select-fixed">
                    <select name="dataTypeName" lay-verify="required" lay-verType="tips" required>
                        <option value="">请选择</option>
                        <option value="MYSQL">MySQL</option>
                        <option value="ORACLE">Oracle</option>
                        <option value="HIVE">hive</option>
                        <option value="PHOENIX">phoenix</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">连接名称:</label>
                <div class="layui-input-block">
                    <input name="connName" placeholder="请输入连接名称，连接名称唯一标识此连接" class="layui-input"
                           lay-verify="required" lay-verType="tips" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">连接URL:</label>
                <div class="layui-input-block">
                    <input name="url" placeholder="请输入连接URL" class="layui-input"
                           lay-verify="required" lay-verType="tips" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">用户名:</label>
                <div class="layui-input-block">
                    <input name="userName" placeholder="连接数据源的用户名" class="layui-input"
                           lay-verify="required" lay-verType="tips" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">密码:</label>
                <div class="layui-input-block">
                    <input name="password" placeholder="连接数据源的密码" class="layui-input"
                           lay-verify="required" lay-verType="tips" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">驱动类名称:</label>
                <div class="layui-input-block">
                    <input name="driverName" placeholder="驱动类的名称" class="layui-input"
                           lay-verify="required" lay-verType="tips" required/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">备注信息:</label>
                <div class="layui-input-block">
                    <input name="remark" placeholder="备注信息" class="layui-input"
                           lay-verType="tips"/>
                </div>
            </div>


        </div>
        <div class="layui-form-item text-right model-form-footer">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="dialogEditSubmit0" lay-submit>测试连接</button>
            <button class="layui-btn" lay-filter="dialogEditSubmit1" lay-submit>保存</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../assets/js/common.js?v=318"></script>
<script>
    layui.use(['layer', 'form', 'element', 'util', 'table', 'tableX', 'format', 'admin', 'upload', 'fileChoose', 'laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var util = layui.util;
        var table = layui.table;
        var tableX = layui.tableX;
        var format = layui.format;
        var admin = layui.admin;
        var upload = layui.upload;
        var fileChoose = layui.fileChoose;
        var laydate = layui.laydate;
        var form = layui.form;

        // 前端分页
        var table1 = tableX.renderFront({
            elem: '#xTable1',
            url: '/autoReport/queryAllConnectionInfos',
            page: {groups: 10},
            async: false,
            cellMinWidth: 100,
            title: '数据源信息',
            cols: [[
                // id   as id ,
                // CONN_NAME  as connName,
                // DATA_TYPE_NAME as dataTypeName,
                // URL as url,
                // USER_NAME  as userName,
                // PASS_WORD  as password,
                // DRIVER_NAME as driverName,
                // CREATE_DATE as createDate,
                // UPDATE_DATE as updateDate,
                // REMARK as remark
                // from t_connection
                {type: 'checkbox'},
                {field: 'dataTypeName', title: '数据源类型', sort: false},
                {field: 'connName', title: '连接名称', sort: false},
                {field: 'url', title: '连接URL', sort: false},
                {field: 'userName', title: '用户名', sort: false},
                {field: 'password', title: '密码', sort: false},
                {
                    field: 'availability', title: '连接可用性', sort: false, templet: function (d) {
                        if (d.availability) {
                            return "<div style='width: 15px;height:15px; display: inline-block; border-radius: 50%;background-color: #0f0'></div> &nbsp;正在连接";
                        } else {
                            return "<div style='width: 15px;height:15px; display: inline-block; border-radius: 50%;background-color: #f00'></div> &nbsp;连接不可用";
                        }
                    }
                },
                {
                    field: 'createDate', templet: function (d) {
                        return util.toDateString(d.createDate);
                    }, title: '创建时间', sort: true
                },
                {
                    field: 'updateDate', templet: function (d) {
                        return util.toDateString(d.updateDate);
                    }, title: '更新时间', sort: true
                },
                {field: 'remark', title: '备注', sort: true}
            ]]
        });


        // 上传
        upload.render({
            elem: '#file-btn-upload',
            url: '/valueRecommend/importStockInfo',   // 上传文件的url
            accept: 'file',
            before: function (obj) {
                // //预读本地文件示例，不支持ie8
                // obj.preview(function (index, file, result) {
                //     $('#importStockExcel').attr('src', result); //图片链接（base64）
                // });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code < 0) {
                    return layer.msg('上传失败');
                } else if (res.code >= 0) {  //上传成功
                    return layer.msg('上传成功');
                }
                table1.reload('xTable1', {   // 按表单设置的参数请求表格接口，从第一页重新加载展示
                    url: '/valueRecommend/queryStockDetailsByCondition',
                    method: "get"
                });
            }
            , error: function () {
                // 演示失败状态，并实现重传
                var importStockExcel = $('#importStockExcel');
                importStockExcel.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                importStockExcel.find('.demo-reload').on('click', function () {
                    upload.upload();
                });
            }
        });

        // 弹窗选择
        $('#file-btn-choose').click(function () {
            fileChoose.open({
                fileUrl: '',
                listUrl: '',
                num: 1,   // 最多选择的文件数
                dialog: {
                    offset: '60px'
                },
                onChoose: function (urls) {
                    layer.msg('你选择了：' + JSON.stringify(urls), {icon: 1});
                }
            });
        });

        // 添加数据源
        // 固定底部按钮
        $('#addDataSourceBtn').click(function () {
            admin.open({
                type: 1,
                title: '添加数据源',
                fixed: true,
                offset: 'auto',
                content: $('#dialogEditDialog1').html(),
                success: function (layero, dIndex) {
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    // // 时间范围选择
                    // laydate.render({
                    //     elem: '#dialogEditForm1 input[name="dateRange"]',
                    //     range: true,
                    //     trigger: 'click'
                    // });
                    form.render('select', 'dialogEditForm1');
                    // 表单提交事件
                    form.on('submit(dialogEditSubmit1)', function (data) {
                        var param = {
                            "connName": data.field.connName,
                            "dataTypeName": data.field.dataTypeName,
                            "url": data.field.url,
                            "userName": data.field.userName,
                            "password": data.field.password,
                            "driverName": data.field.driverName,
                            "remark": data.field.remark
                        };
                        console.info("提交成功, param: " + JSON.stringify(param), {icon: 1});

                        $.ajax({
                            url: "/autoReport/addConnectionInfo",
                            type: 'post',
                            data: param,
                            success: function (res) {
                            }
                        });
                        // return false;
                    });

                }
            });
        });

        setTimeout(function () {
            table.resize('xTable1');
        }, 200);

    });
</script>
</body>
</html>
